<template> 
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="支付状态：" prop="status">
            <el-select
              v-model="listQuery.status"
              filterable
              placeholder="请选择支付状态">
              <el-option
                v-for="item in statues"
                :key="item.name"
                :label="item.name"
                :value="item.name">
                <span style="float: left">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="handleSearchList()"
              size="small">
              筛选
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>订单</span>
      <el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">充值
      </el-button>
    </el-card>
    <div class="table-container">
      <el-table ref="topUpTable"
                :data="list"
                style="width: 100%;"
                :default-sort="{prop:'createTime'}"
                v-loading="listLoading" border>
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">{{
              ((listQuery.pageNum - 1) * listQuery.pageSize) + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column label="订单编号" prop="uuid" width="200" align="center">
          <template slot-scope="scope">{{ scope.row.uuid }}</template>
        </el-table-column>
        <el-table-column label="实付金额" align="center" width="140px">
          <template slot-scope="scope">{{ scope.row.amounts }}</template>
        </el-table-column>
        <el-table-column label="货币类型" align="center">
          <template slot-scope="scope">{{ scope.row.currency }}</template>
        </el-table-column>
        <el-table-column label="渠道" align="center">
          <template slot-scope="scope">{{ scope.row.type }}</template>
        </el-table-column>
        <el-table-column label="下单时间" prop="createTime" align="center" width="200px">
          <template slot-scope="scope">{{ scope.row.createTime | formatDateTime }}</template>
        </el-table-column>
        <el-table-column label="付款状态" align="center">
          <template slot-scope="scope">{{ scope.row.status }}</template>
        </el-table-column>
        <el-table-column label="操作" width="240" align="center">
          <template slot-scope="scope">
            <!--            <el-button size="mini"-->
            <!--                       type="text"-->
            <!--                       v-if="scope.row.status==='已支付'"-->
            <!--                       @click="refundTopUp(scope.$index, scope.row)">-->
            <!--              取消-->
            <!--            </el-button>-->
            <el-button size="mini"
                       type="text"
                       v-if="scope.row.status==='未支付'"
                       @click="paidTopUp(scope.$index, scope.row)">
              付款
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      :title="'充值'"
      :visible.sync="orderDialogVisible"
      width="40%">
      <el-form :model="orderParams"
               :rules="orderRules"
               ref="orderForm"
               label-width="150px" size="small">
        <el-form-item label="金额（￥）" prop="phone">
          <el-input type="number" v-model="orderParams.amounts" name="phone" placeholder="请输入充值金额" max="11"
                    style="width: 250px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleOrderCancel()" size="small">取 消</el-button>
        <el-button type="primary" @click="handleOrderConfirm()" size="small">下单</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// todo 接口
import {
  addTopUpOrder,
  paidTopUpOrder,
  refundTopUpOrder,
  listTopUpOrders
} from '@/api/order'
import {formatDate} from '@/utils/date';
import {mapGetters} from "vuex";

const defaultListQuery = {
  username: "admin",
  status: null,
  pageNum: 1,
  pageSize: 10
};
const defaultOrder = {
  username: "admin",
  amounts: null,
  currency: "￥",
  type: "网上支付"
};
export default {
  name: 'index',
  data() {
    return {
      orderRules: {
        amounts: [{required: true, trigger: 'blur', message: '请输入金额'}],
      },
      listQuery: Object.assign({}, defaultListQuery),
      statues: [{name: "未支付"}, {name: "已支付"}, {name: "已取消"}],
      orderParams: Object.assign({}, defaultOrder),
      list: [],
      total: null,
      listLoading: false,
      orderDialogVisible: false,
      isEdit: false
    }
  },
  created() {
    this.getList()
  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === '') {
        return '';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  computed: {
    ...mapGetters([
      'username'
    ])
  },
  methods: {
    isAdmin() {
      return this.username === 'admin'
    },
    getList() {
      this.listLoading = true;
      listTopUpOrders(this.listQuery).then(res => {
        this.listLoading = false;

        this.list = res.data.list;
        this.total = res.data.total;
      });
    },
    handleAdd() {
      this.orderDialogVisible = true;
    },
    handleOrderConfirm() {
      console.log(this.orderParams)
      this.$refs.orderForm.validate(valid => {
        if (valid) {
          addTopUpOrder(this.orderParams).then(response => {
            this.$message({
              message: "下单成功",
              type: 'success'
            });
            this.orderDialogVisible = false;
            this.$confirm('付款?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              paidTopUpOrder(response.data.uuid).then(res => {
                this.$message.success("支付成功");
              }).catch(e => {
                this.$message.error(e.message)
              });
            })
          }).catch(() => {
            this.orderDialogVisible = false;
            this.$message({
              message: "下单失败",
              type: 'error'
            });
          });
        } else {
          this.$message.error('参数验证不合法！');
          return false
        }
      });
    },
    handleOrderCancel() {
      this.orderDialogVisible = false;
      this.allSeatIds = [];
      this.allSeats = [];
      this.orderParams.seats = null;
      this.msg = [];
      this.msgCount = 0;
    },
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    refundTopUp(index, row) {
      refundTopUpOrder(row.uuid).then(res => {
        this.$message.success("退款成功");
      }).catch(e => {
        this.$message.error(e.message)
      });
    },
    paidTopUp(index, row) {
      paidTopUpOrder(row.uuid).then(res => {
        this.$message.success("支付成功");
      }).catch(e => {
        this.$message.error(e.message)
      });
    },
  }
}
</script>
<style></style>


